<template>
  <div class="wrap">
    <div v-if="ifpartner">
      <div class="box-card-title">
        <p>董事会</p>
      </div>
      <div class="card-table">
        <TableComponent :columns="governingBodyColumns" :data="tableData" :tableOption="tableOption" :stripe="stripe">
          <template slot="id" slot-scope="scopeTag">
            <el-tag v-show="scopeTag.scope.row.flag=='1'" type="success" size="mini">新</el-tag>
          </template>
          <template scope="scope">
            <el-button @click="editRow(scope.scope.row)" type="text" size="mini">编辑</el-button>
            <el-button @click="delRow(scope.scope.row)" type="text" size="mini" :disabled="scope.scope.row.flag=='1'?false:true">删除</el-button>
          </template>
        </TableComponent>
      </div>
      <div class="add-form">
        <el-button type="text" @click="handleAdd">+新增</el-button>
      </div>
      <div class="line"></div>
      <div class="box-card-title">
        <p>监事会</p>
      </div>
      <div class="card-table">
        <TableComponent :columns="governingBodyColumns" :data="JStableData" :tableOption="tableOption" :stripe="stripe">
          <template scope="scope">
            <el-button @click="JSeditRow(scope.scope.row)" type="text" size="mini">编辑</el-button>
            <el-button @click="delRow(scope.scope.row)" type="text" size="mini" :disabled="scope.scope.row.flag=='1'?false:true">删除</el-button>
          </template>
        </TableComponent>
      </div>
      <div class="add-form">
        <el-button type="text" @click="handleAddJS">+新增</el-button>
      </div>
      <div class="line"></div>
    </div>
    <div class="box-card-title">
      <p>管理层</p>
    </div>
    <div class="card-table">
      <TableComponent :columns="governingBodyColumns" :data="GLtableData" :tableOption="tableOption" :stripe="stripe">
        <template scope="scope">
          <el-button @click="GLeditRow(scope.scope.row)" type="text" size="mini">编辑</el-button>
          <el-button @click="delRow(scope.scope.row)" type="text" size="mini" :disabled="scope.scope.row.flag=='1'?false:true">删除</el-button>
        </template>
      </TableComponent>
    </div>
    <div class="add-form">
      <el-button type="text" @click="handleAddGL">+新增</el-button>
    </div>
    <MemberAndCompany @sendData="getDialogData" :dialogData="dialogData" />
    <el-dialog :title="addTitle" :visible.sync="dialogVisibleAdd" width="60%" :before-close="handleCancle">
      <el-form id="warning" :show-message="false" ref="form" :model="addForm" label-width="80px" :rules="rules" label-position="left" style="padding: 0 20px">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="成员" prop="member" style="margin-bottom: 16px">
              <el-input v-model="addForm.member" size="small" disabled :class="ifEdit? 'editClass':'seeClass'"></el-input>
              <el-button v-if="ifEdit" type="text" @click="showSelectPeople" :disabled="ifWatch">选择</el-button>
            </el-form-item>
            <el-form-item label="职务" prop="position" style="margin-bottom: 16px">
              <div class="warning-box" v-for="item in workOptions" :key="item.index">
                <p>{{formate(addFormFormal.position, item.code, item.value)}}</p>
              </div>
              <el-select v-model="addForm.position" placeholder="请选择" size="small" class="select" clearable>
                <el-option
                  v-for="item in workOptions"
                  :key="item.index"
                  :disabled="item.isValid==='1'?false:true"
                  :label="item.value"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任职日期" prop="workDate" style="margin-bottom: 16px">
              <div v-show="addFormFormal.workDate!=null" class="warning-box"><p>{{`原值：${addFormFormal.workDate}`}}</p></div>
              <el-date-picker v-model="addForm.workDate" clearable type="date" size="small" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" class="select"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="委派股东" prop="shareholderName" style="margin-bottom: 16px">
              <div v-show="addFormFormal.shareholderName!=null" class="warning-box"><p>{{`原值：${addFormFormal.shareholderName}`}}</p></div>
              <el-input v-model="addForm.shareholderName" size="small" disabled style="width: calc(100% - 39px)"></el-input>
              <el-button type="text" @click="showSelectShare">选择</el-button>
              <i class="el-icon-circle-close" @click="clearValue" />
            </el-form-item>
            <el-form-item label="产生方式" prop="leaderFormType" style="margin-bottom: 16px; margin-left: -9px">
              <div class="warning-box-required" v-for="item in leaderFormOptions" :key="item.index">
                <p>{{formate(addFormFormal.leaderFormType, item.code, item.value)}}</p>
              </div>
              <el-select v-model="addForm.leaderFormType" clearable placeholder="请选择" size="small" class="select" style="width: calc(100% - 9px); margin-left: 9px">
                <el-option
                  v-for="item in leaderFormOptions"
                  :key="item.index"
                  :label="item.value"
                  :disabled="item.isValid==='1'?false:true"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="卸职日期" prop="resignDate" style="margin-bottom: 16px">
              <div v-show="addFormFormal.resignDate!=null" class="warning-box"><p>{{`原值：${addFormFormal.resignDate}`}}</p></div>
              <el-date-picker
                v-model="addForm.resignDate"
                type="date"
                size="small"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                class="select"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
        <el-button @click="handleCancle">取 消</el-button>
        <el-button type="primary" @click="handledAdd('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TableComponent from '@/components/Table/table'
import MemberAndCompany from './components/memberAndCompany.vue'
import { governingBodyColumns } from '../js/index.js'
import { addGoverningBody, delManagement, director, managementOrg, supervisor, management, leaderFormType, govermentMsgOa, getSingleGoverment, editGoverment } from '@/api/modules/propertyRight.js'
export default {
  components: {
    TableComponent,
    MemberAndCompany
  },
  data() {
    return {
      governingBodyColumns,
      tableData: [],
      JStableData: [],
      GLtableData: [],
      tableOption: {
        isShowOperate: true,
        showTag: true,
        operateWidth: '100px'
      },
      stripe: true,
      ifpartner: true, // 如果为合伙企业则只保留管理层
      // 新增dialog===============================
      dialogVisibleAdd: false,
      addForm: {
        member: '',
        memberId: '',
        position: '',
        workDate: '',
        shareholderName: '',
        appointedShareholder: '',
        leaderFormType: '',
        resignDate: '',
        isPerson: ''
      },
      addFormFormal: {},
      addTitle: '',
      workOptions: [],
      leaderFormOptions: [],
      rules: {
        member: [{required: true, message: '请选择成员', trigger: 'blur'}],
        leaderFormType: [{required: true, message: '请选择产生方式', trigger: 'change'}],
        workDate: [{required: true, message: '请选择任职日期', trigger: 'change'}],
        position: [{required: true, message: '请选择职务', trigger: 'change'}],
      },
      ifWatch: false,
      iconCloseStyle: '', // 关闭icon的动态样式
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6 // 如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      saveId: {
        cmhkId: '', // 保存cmhkId用于查询单条
      },
      saveCompanyMsg: {
        resource: '',
        taskId: '',
        registerType: '',
        companyChiName: '',
        companyEngName: '',
        cmhkId: '',
        companyCode: '',
        registerName: '',
        flag: ''
      },
      ifEdit: true,
      // 选人/公司弹窗组件参数=============
      dialogData: {
        dialogVisible: false,
        shareTitle: ''
      }
    }
  },
  methods: {
    // 格式化报警信息
    formate(text, code, value) {
      if (text == code) {
        return `原值：${value}`
      }
    },
    // 查询治理机构表格信息(改方法在父组件中调用)
    getGovernmentBody(params) {
      this.saveCompanyMsg = params
      govermentMsgOa(params).then(res => {
        if (res.data.code === '0') {
          this.tableData = res.data.body.directorList
          this.JStableData = res.data.body.supervisorList
          this.GLtableData = res.data.body.managementList
        }
      })
    },
    // 新增董事会
    handleAdd() {
      this.dialogVisibleAdd = true
      this.addTitle = '新增董事会'
      this.ifWatch = false
      this.ifEdit = true
      director().then(res => {
        this.workOptions = res.data.body
      })
      leaderFormType().then(res => {
        this.leaderFormOptions = res.data.body
      })
    },
    // 新增监事会
    handleAddJS() {
      this.dialogVisibleAdd = true
      this.addTitle = '新增监事会'
      this.ifWatch = false
      this.ifEdit = true
      supervisor().then(res => {
        this.workOptions = res.data.body
      })
      leaderFormType().then(res => {
        this.leaderFormOptions = res.data.body
      })
    },
    // 新增管理层
    handleAddGL() {
      this.dialogVisibleAdd = true
      this.addTitle = '新增管理层'
      this.ifWatch = false
      this.ifEdit = true
      management().then(res => {
        this.workOptions = res.data.body
      })
      leaderFormType().then(res => {
        this.leaderFormOptions = res.data.body
      })
    },
    // 点击选择出现选成员弹窗
    showSelectPeople() {
      this.dialogData.dialogVisible = true
      this.dialogData.shareTitle = '成员'
    },
    showSelectShare() {
      this.dialogData.dialogVisible = true
      this.dialogData.shareTitle = '委派股东'
    },
    getDialogData(data) {
      if (this.dialogData.shareTitle === '成员') {
        if (data.code === ''||data.value === '') {
          this.dialogData.dialogVisible = false
          this.dialogData.shareTitle = ''
        } else {
          this.addForm.member = data.value
          this.addForm.memberId = data.code
          this.addForm.isPerson = data.isPerson
          this.dialogData.dialogVisible = false
          this.dialogData.shareTitle = ''
        }
      } else if (this.dialogData.shareTitle === '委派股东') {
        if (data.code === ''|| data.value === '') {
          this.dialogData.dialogVisible = false
          this.dialogData.shareTitle = ''
        } else {
          this.addForm.appointedShareholder = data.code
          this.addForm.shareholderName = data.value
          this.addForm.appointType = data.appointType
          this.dialogData.dialogVisible = false
          this.dialogData.shareTitle = ''
        }
      }
    },
    // 点击确定新增/修改
    handledAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.addTitle === '新增董事会') {
            const obj = Object.assign({}, this.addForm, { managementType: '01' }, this.saveCompanyMsg)
            addGoverningBody(obj).then(res => {
              if (res.data.code === '0') {
                this.$message.success('新增成功')
                this.resetForm('form')
                this.dialogVisibleAdd = false
                this.getGovernmentBody(this.saveCompanyMsg)
              } else {
                this.$message.error(res.data.message)
              }
            })
          } else if (this.addTitle === '新增监事会') {
            const obj = Object.assign({}, this.addForm, { managementType: '02' }, this.saveCompanyMsg)
            addGoverningBody(obj).then(res => {
              if (res.data.code === '0') {
                this.$message.success('新增成功')
                this.resetForm('form')
                this.dialogVisibleAdd = false
                this.getGovernmentBody(this.saveCompanyMsg)
              } else {
                this.$message.error(res.data.message)
              }
            })
          } else if (this.addTitle === '新增管理层') {
            const obj = Object.assign({}, this.addForm, { managementType: '03' }, this.saveCompanyMsg)
            addGoverningBody(obj).then(res => {
              if (res.data.code === '0') {
                this.$message.success('新增成功')
                this.resetForm('form')
                this.dialogVisibleAdd = false
                this.getGovernmentBody(this.saveCompanyMsg)
              } else {
                this.$message.error(res.data.message)
              }
            })
          } else if (this.addTitle === '修改董事会') {
            const obj = Object.assign(this.addForm, { managementType: '01' }, this.saveCompanyMsg)
            editGoverment(obj).then(res => {
              if (res.data.code === '0') {
                this.$message.success('修改成功')
                this.resetForm('form')
                this.dialogVisibleAdd = false
                this.getGovernmentBody(this.saveCompanyMsg)
              } else {
                this.$message.error(res.data.message)
              }
            })
          } else if (this.addTitle === '修改监事会') {
            const obj = Object.assign(this.addForm, { managementType: '02' }, this.saveCompanyMsg)
            editGoverment(obj).then(res => {
              if (res.data.code === '0') {
                this.$message.success('修改成功')
                this.resetForm('form')
                this.dialogVisibleAdd = false
                this.getGovernmentBody(this.saveCompanyMsg)
              } else {
                this.$message.error(res.data.message)
              }
            })
          } else if (this.addTitle === '修改管理层') {
            const obj = Object.assign(this.addForm, { managementType: '03' }, this.saveCompanyMsg)
            editGoverment(obj).then(res => {
              if (res.data.code === '0') {
                this.$message.success('修改成功')
                this.resetForm('form')
                this.dialogVisibleAdd = false
                this.getGovernmentBody(this.saveCompanyMsg)
              } else {
                this.$message.error(res.data.message)
              }
            })
          }
        } else {
          this.$message.error('请检查必填项')
          return false
        }
      })
    },
    // 编辑董事会
    editRow(row) {
      this.dialogVisibleAdd = true
      this.addTitle = '修改董事会'
      this.ifWatch = true
      this.ifEdit = false
      director().then(res => {
        this.workOptions = res.data.body
      })
      leaderFormType().then(res => {
        this.leaderFormOptions = res.data.body
      })
      const obj = Object.assign({}, row, this.saveCompanyMsg)
      getSingleGoverment(obj).then(res => {
        if (res.data.code === '0') {
          this.addForm = res.data.body.temp
          this.addFormFormal = res.data.body.formal || {}
        }
      })
    },
    // 编辑监事会
    JSeditRow(row) {
      this.dialogVisibleAdd = true
      this.addTitle = '修改监事会'
      this.ifWatch = true
      this.ifEdit = false
      supervisor().then(res => {
        this.workOptions = res.data.body
      })
      leaderFormType().then(res => {
        this.leaderFormOptions = res.data.body
      })
      const obj = Object.assign({}, row, this.saveCompanyMsg)
      getSingleGoverment(obj).then(res => {
        if (res.data.code === '0') {
          this.addForm = res.data.body.temp
          this.addFormFormal = res.data.body.formal
        }
      })
    },
    // 编辑管理层
    GLeditRow(row) {
      this.dialogVisibleAdd = true
      this.addTitle = '修改管理层'
      this.ifWatch = true
      this.ifEdit = false
      management().then(res => {
        this.workOptions = res.data.body
      })
      leaderFormType().then(res => {
        this.leaderFormOptions = res.data.body
      })
      const obj = Object.assign({}, row, this.saveCompanyMsg)
      getSingleGoverment(obj).then(res => {
        if (res.data.code === '0') {
          this.addForm = res.data.body.temp
          this.addFormFormal = res.data.body.formal
        }
      })
    },
    // 删除治理机构
    delRow(row) {
      const data = {
        taskId: row.taskId,
        position: row.position,
        memberId: row.memberId,
        managementType: row.managementType
      }
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delManagement(data).then(res => {
          if (res.data.code === '0') {
            this.$message.success('删除成功')
            this.getGovernmentBody(this.saveCompanyMsg)
          } else {
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleCancle() {
      this.resetForm('form')
      this.addFormFormal = {}
      this.dialogVisibleAdd = false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    clearValue() {
      this.addForm.shareholderName = ''
      this.addForm.appointedShareholder = ''
    },
    // 如果为合伙企业则只保留管理层(此方法在父组件中调用)
    ispartner() {
      this.ifpartner = false
    },
    notpartner() {
      this.ifpartner = true
    }
  }
}
</script>

<style lang="less" scoped>
  .wrap {
    .box-card-title {
      width: calc(100% - 60px);
      height: 50px;
      padding: 0 30px;
      border-bottom: 1px solid #d7dae2;
      p {
        font-size: 16px;
        line-height: 50px;
      }
    }
    .card-table {
      width: 100%;
    }
    .add-form {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
    }
    .line {
      width: 100%;
      height: 20px;
      background-color: #f7f7f7;
    }
    .select {
      width: 100%;
    }
    .table-box {
      height: 40vh;
    }
    .editClass {
      width: calc(100% - 39px);
    }
    .seeClass {
      width: calc(100% - 0px);
    }
    .el-icon-circle-close {
      position: absolute;
      top: 15px;
      right: 45px;
      font-size: 14px;
      color: gray;
    }
    .warning-box {
      font-size: 12px;
      background-color: rgba(225, 101, 49, 0.2);
      border-radius: 3px;
      position: absolute;
      top: -17px;
      left: 0;
      z-index: 1;
      p {
        color: rgba(225, 101, 49);
      }
    }
    .warning-box-required {
      font-size: 12px;
      margin-left: 9px;
      background-color: rgba(225, 101, 49, 0.2);
      border-radius: 3px;
      position: absolute;
      top: -17px;
      left: 0;
      z-index: 1;
      p {
        color: rgba(225, 101, 49);
      }
    }
  }
</style>
<style>
  #warning .el-form-item__content {
    line-height: 17px;
    position: relative;
    font-size: 14px;
  }
</style>
